.axiom-button {
  // 基础样式
  border-radius: var(--axiom-border-radius-base);
  font-family: var(--axiom-font-family-base);
  font-weight: var(--axiom-button-font-weight, 600);
  transition: var(--axiom-transition-base);
  border: var(--axiom-button-border-width, 1px) solid transparent;
  gap: var(--spacing-sm);

  // [修复] 为按钮内的图标和文字之间添加间距
  // 选择后面紧跟着 <span> 的 <i> 元素
  i + span {
    margin-left: var(--axiom-spacing-xs); // 使用已定义的变量
  }

  // 主要按钮样式
  &.axiom-button--primary {
    background: transparent;
    border-color: var(--axiom-primary-color);
    color: var(--axiom-primary-color);
    box-shadow: var(--axiom-box-shadow-primary, none);

    &:hover {
      background: var(--axiom-primary-color);
      color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse));
      box-shadow: var(--axiom-box-shadow-primary, none);
    }
  }

  // 成功按钮样式
  &.axiom-button--success {
    background: transparent;
    border-color: var(--axiom-success-color);
    color: var(--axiom-success-color);

    &:hover {
      background: var(--axiom-success-color);
      color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse));
    }
  }
  
  // 危险按钮样式
  &.axiom-button--danger {
    background: transparent;
    border-color: var(--axiom-danger-color);
    color: var(--axiom-danger-color);
    
    &:hover {
      background: var(--axiom-danger-color);
      color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse));
    }
  }

  // 警告按钮样式
  &.axiom-button--warning {
    background: transparent;
    border-color: var(--axiom-warning-color);
    color: var(--axiom-warning-color);

    &:hover {
      background: var(--axiom-warning-color);
      color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse));
    }
  }

  // 禁用状态
  &.is-disabled,
  &.is-disabled:hover {
    background: var(--axiom-bg-color-disabled);
    border-color: var(--axiom-border-color);
    color: var(--axiom-text-color-disabled);
    box-shadow: none;
    cursor: not-allowed;
  }

  // --- 4. Block (full-width) ---
  &.axiom-button--block {
    width: 100%;
    display: block;
  }

  // --- 5. Filled variant (New) ---
  &.axiom-button--filled {
    background-color: var(--axiom-primary-color);
    color: var(--axiom-text-color-on-primary, var(--axiom-text-color-inverse));
    border: none;
    
    &:hover {
      background-color: var(--axiom-button-filled-primary-hover-bg, var(--primary-color-dark, var(--axiom-primary-color))); // Fallback
    }
  }
}

.axiom-button.is-link {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;

  &.axiom-button--primary {
    color: var(--axiom-primary-color);
  }
  &.axiom-button--success {
    color: var(--axiom-success-color);
  }
  &.axiom-button--danger {
    color: var(--axiom-danger-color);
  }
  &.axiom-button--warning {
    color: var(--axiom-warning-color);
  }

  &:hover:not(.is-disabled) {
    background: transparent !important;
  }
}

// 主题特定样式 - 特效主题
// 只有当主题需要新增 CSS 属性（如动画、伪元素）时才需要添加。
// 对于只改变颜色的普通主题（如 dark, light），则无需在此添加任何代码。

// Cyberpunk 主题专属“特效”
html.theme-cyberpunk {
  .axiom-button {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text-color-secondary);
    backdrop-filter: var(--backdrop-blur);
    transition: all 0.3s ease;

    &:hover:not(.is-disabled) {
      color: var(--primary-color-hover);
      border-color: var(--primary-color-hover);
      transform: translateY(-2px);
      box-shadow: var(--primary-glow);
    }
    
    &.axiom-button--primary {
      border-color: var(--primary-color);
      color: var(--primary-color);
      box-shadow: 0 0 8px var(--primary-color), inset 0 0 8px var(--primary-color);

      &:hover:not(.is-disabled) {
        color: var(--text-color-on-primary);
        background: var(--primary-color);
        box-shadow: var(--primary-glow);
      }
    }

    &.axiom-button--success {
      border-color: var(--success-color);
      color: var(--success-color);
      box-shadow: 0 0 8px var(--success-color), inset 0 0 8px var(--success-color);

      &:hover:not(.is-disabled) {
        color: var(--text-color-on-primary);
        background: var(--success-color);
        box-shadow: var(--success-glow);
      }
    }
    
    &.axiom-button--danger {
      border-color: var(--danger-color);
      color: var(--danger-color);
      box-shadow: 0 0 8px var(--danger-color), inset 0 0 8px var(--danger-color);
      
      &:hover:not(.is-disabled) {
        color: var(--text-color-on-primary);
        background: var(--danger-color);
        box-shadow: var(--danger-glow);
      }
    }

    &.axiom-button.is-link {
      &.axiom-button--primary:hover:not(.is-disabled) {
        color: var(--primary-color-hover);
        text-shadow: var(--primary-glow);
      }
      &.axiom-button--success:hover:not(.is-disabled) {
        color: var(--success-color-hover);
        text-shadow: var(--success-glow);
      }
      &.axiom-button--danger:hover:not(.is-disabled) {
        color: var(--danger-color-hover);
        text-shadow: var(--danger-glow);
      }
    }

    &.axiom-button--filled {
      background-color: var(--primary-color);
      color: var(--text-color-on-primary);
      border: none;
      box-shadow: 0 0 8px var(--primary-color), inset 0 0 8px var(--primary-color);

      &:hover:not(.is-disabled) {
        background-color: var(--primary-color-hover);
        box-shadow: var(--secondary-glow);
      }
    }
  }
  
  // Fallback for non-webkit browsers
  @supports not (-webkit-background-clip: text) {
    .axiom-button.axiom-button--primary {
      color: #fff;
    }
  }

  // 无障碍 - 减少动画
  @media (prefers-reduced-motion: reduce) {
    .axiom-button.axiom-button--primary {
      animation: none;
    }
  }
}

html.theme-neon .axiom-button {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-color-secondary);
  backdrop-filter: var(--backdrop-blur);
  transition: all 0.3s ease;

  &:hover:not(.is-disabled) {
    color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    transform: translateY(-2px);
    box-shadow: var(--primary-glow);
  }
  
  &.axiom-button--primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color), inset 0 0 8px var(--primary-color);

    &:hover:not(.is-disabled) {
      color: var(--text-color-on-primary);
      background: var(--primary-color);
      box-shadow: var(--primary-glow);
    }
  }

  &.axiom-button--filled {
    background-color: var(--primary-color);
    color: var(--text-color-on-primary);
    border: none;
    box-shadow: 0 0 8px var(--primary-color), inset 0 0 8px var(--primary-color);

    &:hover:not(.is-disabled) {
      background-color: var(--primary-color-hover);
      box-shadow: var(--secondary-glow);
    }
  }
}

// Rainbow Cyber 主题专属“特效”
html.theme-rainbow-cyber {
  .axiom-button[type="primary"],
  .el-button--primary {
    background: linear-gradient(135deg, var(--axiom-primary-color), var(--axiom-secondary-color)) !important;
    box-shadow: var(--rainbow-glow) !important;
    animation: rainbow-pulse 3s ease-in-out infinite;
    border: none !important;
    
    &:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: var(--rainbow-glow), 0 8px 24px rgba(0, 221, 255, 0.2) !important;
    }
  }
}